<template>
    <div class="rightDesign1">
        <el-form  size="small" label-width="80px">
            <template v-if="activeData.__config__.tag === 'vantField'">
                <el-form-item  label="字号">
                     <el-select
                        v-model="activeData.fontSize"
                        :style="{width: '100%'}" @change="changeFont"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
                </el-form-item>
                <el-form-item  label="设置">
                  <div>
                      <span class="settingBtnForColor colorSetBox"><el-color-picker v-model="activeData.backColor" size="mini" ></el-color-picker></span>
                      <span :class="activeData.bold ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('bold')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italic ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italic')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underline ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underline')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.textAlign == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlign','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlign == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlign','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlign == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlign','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.heightFlag ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlag')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.lineHeight" class="selectStyleHeight"
                        v-show="activeData.heightFlag"  @change="changeHeight"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
                  </div>
                </el-form-item>
                 <el-form-item  label="跳转类型">
                  <el-select placeholder="请选择" v-model="activeData.jumpType" size="small" style="width:100%;"  @change="changeJumpType">
                      <el-option label="不跳转" value="no"></el-option>
                      <el-option label="跳转至页面" value="page"></el-option>
                      <el-option label="跳转至功能" value="function"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  label="链接功能" v-if="activeData.jumpType == 'function'">
                  <el-select filterable placeholder="请选择"  size="small" style="width:100%;" v-model="activeData.functionMenu">
                     <el-option v-for=" item in this.$store.state.mobile.functionMenu" :label="item.name" :value="item.path" :key='item.name'></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  label="设置页面" v-if="activeData.jumpType == 'page'">
                  <el-select placeholder="请选择" size="small" style="width:100%;"  v-model="activeData.jumpPath">
                    <el-option v-for=" item in this.$store.state.mobile.pageStore" :label="item" :value="item" :key='item'></el-option>
                  </el-select>
                </el-form-item>
                </template>
                <template v-if="activeData.__config__.tag === 'vantImagee'"> 
                    <el-form-item  label="图片">
                      <div class="picStyle">
                          <img :src="activeData.src" />
                          <el-upload
                              class="upload-demo"
                              ref="upload"
                              :action="uploadFileUrl"
                              :file-list="fileList"
                              :headers="{'Authorization':`Bearer ${token}`}"
                              :on-success="handleUploadSuccess"
                              :before-upload="beforeUploadHandler"
                              :multiple="false"
                              :show-file-list="false">
                              <el-button slot="trigger" size="small" ><i class="el-icon-upload el-icon--right"></i>上传图片</el-button>
                          </el-upload>
                      </div>
                    </el-form-item>
                    <el-form-item  label="宽高">
                       <div class="picWidth">
                          <el-input v-model="activeData.width" type="number"></el-input>
                          <img :src="rlinkM">
                          <el-input v-model="activeData.height" type="number"></el-input>
                       </div>
                    </el-form-item>
                    <el-form-item label="大图">
                         <el-checkbox v-model="activeData.isViweImg">点击查看大图</el-checkbox>
                    </el-form-item>
                    <el-form-item  label="跳转类型" @change="changeJumpType">
                    <el-select placeholder="请选择" v-model="activeData.jumpType" size="small" style="width:100%;">
                        <el-option label="不跳转" value="no"></el-option>
                        <el-option label="跳转至页面" value="page"></el-option>
                        <el-option label="跳转至功能" value="function"></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item  label="链接功能" v-if="activeData.jumpType == 'function'">
                    <el-select filterable placeholder="请选择"  size="small" style="width:100%;"  v-model="activeData.functionMenu">
                      <el-option v-for=" item in this.$store.state.mobile.functionMenu" :label="item.name" :value="item.path" :key='item.name'></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item  label="设置页面" v-if="activeData.jumpType == 'page'">
                    <el-select placeholder="请选择" size="small" style="width:100%;"  v-model="activeData.jumpPath">
                      <el-option v-for=" item in this.$store.state.mobile.pageStore" :label="item" :value="item" :key='item'></el-option>
                    </el-select>
                  </el-form-item>
                </template> 
                <template v-if="activeData.__config__.tag === 'vantSwipe'">
                  <el-form-item label="模块名称">
                     <div class="flex">
                        <el-input v-model="activeData.moduleName" placeholder="请输入"></el-input>
                        <el-checkbox v-model="activeData.isShow" class="marginLeft">隐藏</el-checkbox>
                     </div>
                  </el-form-item>
                  <el-form-item label="字号">
           <el-select
                        v-model="activeData.fontSizeModule"
                        :style="{width: '100px'}" @change="changeFont3"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
        </el-form-item>
        <el-form-item label="设置">
         <div class="setBox" style="display:flex;flex-wrap:nowrap;align-items: center;">
          <span class="colorSetBox"><el-color-picker v-model="activeData.backColorModule" size="mini" ></el-color-picker></span>
                      <span :class="activeData.boldModule ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('boldModule')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italicModule ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italicModule')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underlineModule ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underlineModule')"> <img :src="underlineIcon" /></span>
                      <span :class="activeData.textAlignModule == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlignModule','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlignModule == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlignModule','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlignModule == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlignModule','right')"><img :src="justifyRight" /></span>
                      <span :class="activeData.heightFlagModule ? 'checked settingBtn' : 'settingBtn'"  title="行高"  @click="fontStyle('heightFlagModule')"><img :src="lineHeight" /></span>
                      <el-select
                        v-model="activeData.lineHeightModule" style="width:100px;margin-left:10px;"
                        v-show="activeData.heightFlagModule"  @change="changeHeight3"
                      >
                        <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                        </el-option>
                     </el-select>
       </div>
        </el-form-item>
                  <el-form-item label="图片" >
                    <ul class="swipePic">
                      <li  v-for="(tag,index) in activeData.srcList" :key="index" @click="selectPic(tag,index)"  :class="active==index ? 'activeCls' : '' ">
                        <img :src="tag" >
                        <span class="item-actions">
                          <span class="item-delete">
                            <i class="el-icon-delete" @click.stop="delPic(tag,index)"/>
                          </span>
                        </span>
                      </li>
                      <el-upload
                        :action="uploadFileUrl"
                        :headers="{'Authorization':`Bearer ${token}`}"
                        list-type="picture-card"
                        :show-file-list="false"
                        :before-upload="beforeUploadHandler"
                        :on-success="handlePicSuccess"
                        :multiple="false"
                        class="uploadSwipe"
                        v-show="activeData.srcList && activeData.srcList.length > 4 ? false : true"
                        >
                        <i class="el-icon-plus"></i>
                      </el-upload>
                  </ul>
                  </el-form-item>
                  <el-form-item label="描述">
                      <el-input v-model="activeData.imgList[active].describe" placeholder="请输入"></el-input>
                  </el-form-item>
                  <el-form-item label="描述设置">
                    <div class="descriptionSettings">
                        <el-radio-group v-model="activeData.imgList[active].describeSetting">
                          <el-radio :label="1">默认</el-radio>
                          <el-radio :label="2">隐藏</el-radio>
                          <el-radio :label="3">自定义</el-radio>
                        </el-radio-group>
                        <el-color-picker  size="mini" v-show="activeData.imgList[active].describeSetting == 3" v-model="activeData.imgList[active].describeColor"></el-color-picker>
                    </div>
                  </el-form-item>
                <el-form-item  label="跳转类型" >
                  <el-select placeholder="请选择" v-model="activeData.imgList[active].jumpType" size="small" style="width:100%;" @change="changemul(activeData.imgList[active].jumpType,active,'imgList')">
                      <el-option label="不跳转" value="no"></el-option>
                      <el-option label="跳转至页面" value="page"></el-option>
                      <el-option label="跳转至功能" value="function"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  label="链接功能" v-if="activeData.imgList[active].jumpType == 'function'">
                  <el-select filterable placeholder="请选择"  size="small" style="width:100%;" v-model="activeData.imgList[active].functionMenu">
                    <el-option v-for=" item in this.$store.state.mobile.functionMenu" :label="item.name" :value="item.path" :key='item.name'></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  label="设置页面" v-if="activeData.imgList[active].jumpType == 'page'">
                  <el-select placeholder="请选择" size="small" style="width:100%;"  v-model="activeData.imgList[active].jumpPath">
                    <el-option v-for=" item in this.$store.state.mobile.pageStore" :label="item" :value="item" :key='item'></el-option>
                  </el-select>
                </el-form-item>
                  <el-form-item label="高度设置">
                    <div class="descriptionSettings">
                        <el-radio-group v-model="activeData.height">
                          <el-radio :label="1">默认</el-radio>
                          <el-radio :label="2">自定义</el-radio>
                        </el-radio-group>
                        <el-input v-model="activeData.heightSize" type="number" style="width: 99px" v-show="activeData.height == 2"></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="图片缩放">
                      <el-radio-group v-model="activeData.imageZoom">
                        <el-radio :label="1">拉伸</el-radio>
                        <el-radio :label="2">填充</el-radio>
                        <el-radio :label="3">不平铺</el-radio>
                      </el-radio-group>
                  </el-form-item>
                  <el-form-item label="大图">
                      <el-checkbox v-model="activeData.isViweImg">点击查看大图</el-checkbox>
                  </el-form-item>
                  <el-form-item label="自动切换">
                    <div style="display:flex;">
                      <el-select v-model="activeData.autoplay" size="small" style="width:100px;margin-right:5px;">
                        <el-option label="1" :value="1"></el-option>
                        <el-option label="2" :value="2"></el-option>
                        <el-option label="3" :value="3"></el-option>
                        <el-option label="4" :value="4"></el-option>
                        <el-option label="5" :value="5"></el-option>
                    </el-select>
                    <span>秒</span>
                    </div>
                     
                  </el-form-item>
                </template>
                <template v-if="activeData.__config__.tag === 'vantButton'">
                   <el-form-item label="按钮样式">
                      <div class="buttonList">
                        <el-button type="primary" @click="selectButton(0)" :class="[{checkBtn: activeData.selectBtn === 0}]"></el-button>
                        <el-button plain style="border-color:#1890ff" @click="selectButton(1)" :class="[{checkBtn: activeData.selectBtn === 1}]"></el-button>
                        <el-button type="primary" round @click="selectButton(2)" :class="[{checkBtn: activeData.selectBtn === 2}]"></el-button>
                        <el-button style="border-color:#1890ff" round @click="selectButton(3)" :class="[{checkBtn: activeData.selectBtn === 3}]"></el-button>
                      </div>
                  </el-form-item>
                  <el-form-item label="按钮文本">
                      <el-input v-model="activeData.moduleName" ></el-input>
                  </el-form-item>
                   <el-form-item  label="文本字号">
                     <el-select
                        v-model="activeData.fontSize"
                        :style="{width: '100px'}"
                      >
                      <el-option v-for="(opt, index) in fontSize" :label="opt.label" :value="opt.val" :key="index">
                      </el-option>
                     </el-select>
                  </el-form-item>
                  <el-form-item label="设置">
         <div class="setBox" style="display:flex;flex-wrap:nowrap;align-items: center;">
          <span class="colorSetBox"><el-color-picker v-show="(activeData.selectBtn===0 || activeData.selectBtn===2)" v-model="activeData.fontColor" size="small" ></el-color-picker></span>
          <span class="colorSetBox"><el-color-picker v-show="(activeData.selectBtn===1 || activeData.selectBtn===3)" v-model="activeData.fontColorplan" size="small" ></el-color-picker></span>
                      <span :class="activeData.bold ? 'checked settingBtn' : 'settingBtn'"  title="加粗" @click="fontStyle('bold')"> <img :src="boldIcon" /></span>
                      <span :class="activeData.italic ? 'checked settingBtn' : 'settingBtn'"  title="倾斜" @click="fontStyle('italic')"> <img :src="italicIcon" /></span>
                      <span :class="activeData.underline ? 'checked settingBtn' : 'settingBtn'"  title="下划线" @click="fontStyle('underline')"> <img :src="underlineIcon" /></span>
                      <!-- <span :class="activeData.textAlign == 'left' ? 'checked settingBtn' : 'settingBtn'"  title="左对齐" @click="fonttext('textAlign','left')"><img :src="justifyLeft" /></span>
                      <span :class="activeData.textAlign == 'center'? 'checked settingBtn' : 'settingBtn'"  title="居中"  @click="fonttext('textAlign','center')"><img :src="justifyCenter" /></span>
                      <span :class="activeData.textAlign == 'right' ? 'checked settingBtn' : 'settingBtn'"  title="右对齐"  @click="fonttext('textAlign','right')"><img :src="justifyRight" /></span> -->
        
       </div>
        </el-form-item>
                  
                  <el-form-item label="按钮颜色">
                    
                    <el-color-picker v-show="(activeData.selectBtn===0 || activeData.selectBtn===2)" v-model="activeData.btnColorCustom" size="small" ></el-color-picker>
                    <el-color-picker v-show="(activeData.selectBtn===1 || activeData.selectBtn===3)" v-model="activeData.btnColorplan" size="small" ></el-color-picker>
                  </el-form-item>
                   <el-form-item  label="按钮宽高">
                       <div class="picWidth">
                          <el-input v-model="activeData.width" type="number"></el-input>
                          <img :src="rlinkM">
                          <el-input v-model="activeData.height" type="number"></el-input>
                       </div>
                  </el-form-item>
                  <el-form-item  label="跳转类型">
                    <el-select placeholder="请选择" v-model="activeData.jumpType" size="small" style="width:100%;"> 
                        <el-option label="不跳转" value="no"></el-option>
                        <el-option label="跳转至页面" value="page"></el-option>
                        <el-option label="跳转至功能" value="function"></el-option>
                        <el-option label="退出登录" value="logout"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item  label="链接功能" v-if="activeData.jumpType == 'function'">
                  <el-select filterable placeholder="请选择"  size="small" style="width:100%;" v-model="activeData.functionMenu">
                     <el-option v-for=" item in this.$store.state.mobile.functionMenu" :label="item.name" :value="item.path" :key='item.name'></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item  label="设置页面" v-if="activeData.jumpType == 'page'">
                  <el-select placeholder="请选择" size="small" style="width:100%;"  v-model="activeData.jumpPath">
                    <el-option v-for=" item in this.$store.state.mobile.pageStore" :label="item" :value="item" :key='item'></el-option>
                  </el-select>
                </el-form-item>
                </template>
           </el-form>
    </div>
</template>
<script>
import boldIcon from '@/assets/images/bold_icon.png'
import italicIcon from '@/assets/images/italic.png'
import underlineIcon from '@/assets/images/underline.png'
import justifyLeft from '@/assets/images/justifyLeft.png'
import justifyCenter from '@/assets/images/justifyCenter.png'
import justifyRight from '@/assets/images/justifyRight.png'
import lineHeight from '@/assets/images/lineHeight.png'
import rlinkM from '@/assets/images/rlink-m.png'
import {getAccessToken} from '@/utils/auth'
export default {
    props: ['activeData'],
    data(){
        return {
          token:'',
          uploadFileUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload", // 请求地址
          fileList: [],
          boldIcon,
          italicIcon,
          underlineIcon,
          justifyLeft,
          justifyCenter,
          justifyRight,
          lineHeight,
          rlinkM,
          checked: '',
          index: 0,
          active: 0,
          selectBtn:0,
          fontHeight: [
            {label: '10px',val: '10px'},
            {label: '11px',val: '11px'},
            {label: '12px',val: '12px'},
            {label: '13px',val: '13px'},
            {label: '14px',val: '14px'},
            {label: '15px',val: '15px'},
            {label: '16px',val: '16px'},
            {label: '18px',val: '18px'},
            {label: '20px',val: '20px'},
            {label: '24px',val: '24px'},
            {label: '30px',val: '30px'},
            {label: '36px',val: '36px'},
            {label: '48px',val: '48px'},
            {label: '60px',val: '60px'},
            {label: '72px',val: '72px'},
            {label: '84px',val: '84px'},
            {label: '96px',val: '96px'},
            {label: '108px',val: '108px'},
            {label: '120px',val: '120px'},
          ],
          fontSize: [
            {label: '10px',val: '10px'},
            {label: '11px',val: '11px'},
            {label: '12px',val: '12px'},
            {label: '13px',val: '13px'},
            {label: '14px',val: '14px'},
            {label: '15px',val: '15px'},
            {label: '16px',val: '16px'},
            {label: '18px',val: '18px'},
            {label: '20px',val: '20px'},
            {label: '24px',val: '24px'},
            {label: '30px',val: '30px'},
            {label: '36px',val: '36px'},
            {label: '48px',val: '48px'},
            {label: '60px',val: '60px'},
            {label: '72px',val: '72px'},
            {label: '84px',val: '84px'},
            {label: '96px',val: '96px'},
            {label: '108px',val: '108px'},
            {label: '120px',val: '120px'},
          ]
        }
    },
    mounted() {
      this.token =  getAccessToken()
    },
    methods:{
      changeJumpType() {
        if(this.activeData.jumpType == 'function'){  //功能
            this.activeData.jumpPath = ''
        }else if(this.activeData.jumpType == 'page') { // 页面
            this.activeData.functionMenu = ''
        }else{
            this.activeData.functionMenu = ''
            this.activeData.jumpPath = ''
        }
      },
      changemul(val,index,type){
         if(val == 'function'){  //功能
            this.activeData[type][index].jumpPath = ''
        }else if(val == 'page') { // 页面
            this.activeData[type][index].functionMenu = ''
        }else{
            this.activeData[type][index].functionMenu = ''
            this.activeData[type][index].jumpPath = ''
        }
      },
      selectButton(val) {
        this.selectBtn = val
        this.$set(this.activeData,'selectBtn',val);
      },
      fonttext(data,position) {
        this.$set(this.activeData,data,position );
      },
      fontStyle(data) {
        this.activeData[data] = !this.activeData[data] 
        this.$set(this.activeData,data,this.activeData[data] );
      },
      changeFont(val){
        this.$set(this.activeData,'fontSize',val);
      },
      changeHeight(val) {
         this.$set(this.activeData,'lineHeight',val);
      },
      beforeUploadHandler(file){
        if (!/\.(jpg|jpeg|gif|bmp|png)$/i.test(file.name)) {
          this.$message.warning("请上传图片类型");
          return false;
        }
      if(file.size>2*1024*1024){
        this.$message.warning('上传图片不能超过2M');
         return false;
      }else{
        return true;
      }
    },
       // 上传成功回调
       handleUploadSuccess(response, file, fileList) {
          if(response){
              this.activeData.src = response.data
          }else{
            this.$message.error('上传失败')
          }
      },
      handlePicSuccess(res, file,fileList) {
          if(res){
            this.activeData.srcList.push(res.data);
            console.log(this.activeData.srcList)
            if(this.activeData.srcList?.length === 1){ //默认选中第一个
                this.checked = this.activeData.srcList[0]
                this.index = 0
            }
            if(this.activeData.imgList.length === 1 && this.activeData.imgList[0].src == ''){
                this.activeData.imgList = this.activeData.srcList?.map((item,index) => {
                  console.log(item)
                  return {
                    id: index,
                    src: item,
                    describe: '',
                    describeSetting: 1,
                    jumpType: 'no',
                    height: 1,
                    heightSize: null,
                    imageZoom: 2,
                    isViweImg: true,
                  }
              })
            }else{
              let arr = [
                {
                    id: this.activeData.imgList.length,
                    src: res.data,
                    describe: '',
                    describeSetting: 1,
                    jumpType: 'no',
                    height: 1,
                    heightSize: null,
                    imageZoom: 2,
                    isViweImg: true,
                }
              ]
               this.activeData.imgList = [...this.activeData.imgList,...arr]
            }
          }else{
            this.$message.error('上传失败')
          }
      },
      delPic(val,index) {
        this.activeData.srcList.splice(index,1)
        this.activeData.imgList.splice(index,1)
        if(this.activeData.srcList?.length === 1){ //默认选中第一个
              this.checked = this.activeData.srcList[0]
              this.active = 0
          }
        if(this.activeData.srcList.length == 0 ){
          this.activeData.imgList = [
              {
                id: null,
                src: '',
                describe: '',
                describeSetting: 1,
                describeColor: 'red',
                jumpType: 'no',
                jumpPath: '',
                functionMenu: ''
              }
          ]
        }
      },
      selectPic(val,index) {
        this.checked = val
        this.active = index
      },
      changeFont3(val){
        this.$set(this.activeData,'fontSizeModule',val);
      },
      changeHeight3(val) {
         this.$set(this.activeData,'lineHeightModule',val);
      },
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/mobileRightPanel';
.colorSetBox{
      display:flex;
    }
</style>
<style>
 .rightDesign1 .el-color-picker__trigger{
    padding:0;
    border-radius: 50%;
    border:none;
    width:28px;
    height:28px;
  }
 .rightDesign1 .el-color-picker__color{
    border-radius: 50%;
  }
  .rightDesign1 .el-color-picker__color-inner{
    border-radius: 50%;
  }
</style>